<template>
	<view>
		<view class="add-ad" v-if="isNullAddress" @click="addAddress">
			+新建收货地址
		</view>
		<view @click="selectAddress" class="add-address" v-else>
			<view class="row01">
				<text class="name">{{address.username}}</text>
				<view class="phone">{{address.mobile}}</view>
				<image src="../../static/common/righticon.png"></image>
			</view>
			<view class="row02">
				<text class="default">默认</text>
				<view class="address">
					{{address.provinceName}}{{address.cityName}}{{address.areaName}}{{address.address}}</view>
			</view>
		</view>
		<view class="top" v-for="item in list">
			<view class="cell01">
				<image :src="item.image"></image>
			</view>
			<view class="cell02">
				<view class="name">{{item.goods_name}}</view>
				<view class="guige">
					<text>{{item.specTag}}</text>
				</view>
			</view>
			<view class="cell03">
				<view class="pricebox" v-if="type ==1">
					<text class="priceicon">¥</text>
					<text class="pricetext">{{item.rankPrice}}</text>
				</view>
				<view class="pricebox" v-else="type ==2">
					<text class="priceicon"></text>
					<text class="pricetext">积分 {{item.score}}</text>
				</view>
				<view class="count"><text>x{{item.count}}</text></view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-item">
				<view class="left">快递运费</view>
				<view class="right"><text>包邮</text><text>¥0</text></view>
			</view>
			<!-- <view class="bottom-item2">
				<view class="left">优惠折扣</view>
				<view class="right"><text>请选择</text>
					<image src="../../static/common/righticon.png"></image>
				</view>
			</view> -->
			<view class="bottom-item3">
				<view class="left">备注</view>
				<view class="right"><input type="text" placeholder="订单备注可选" /></view>
			</view>

		</view>
		<view class="fixedbtn">
			<view>
				<text class="label1">共{{count}}件，</text>
				<text class="label2">合计：</text>
				<text class="label3" v-if="type ==1 ">¥{{totalPrice}}</text>
				<text class="label3" v-else="type ==2 ">积分 {{totalPrice}}</text>

				<button class="redbtn" @click="addOrder">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				isNullAddress: false,
				address: {},
				list: [],
				totalPrice: 0,
				count: 0,
				data: {},
				orderNo: '',
				type: ''
			}
		},

		onLoad(option) {


			console.info(option.item);
			if (option.item) {


				this.data = JSON.parse(option.item);
				this.list = JSON.parse(option.item);
				this.type = option.type;
				console.info(JSON.stringify(this.list));
				this.cacl();
			}

		},
		onShow() {
			this.getList();
		},
		methods: {
			addAddress() {
				uni.navigateTo({
					url: './addAddress'
				})
			},
			//计算数量和价格
			cacl() {

				var count = 0;
				var price = 0;
				if (this.type == 1) {
					for (var i = 0; i < this.list.length; i++) {
						price += parseFloat(this.list[i].rankPrice * this.list[i].count);
						count += this.list[i].count;
					}
				} else {
					for (var i = 0; i < this.list.length; i++) {
						price += parseFloat(this.list[i].score * this.list[i].count);
						count += this.list[i].count;
					}
				}

				this.totalPrice = price;
				this.count = count;
			},

			selectAddress() {

				uni.navigateTo({
					url: '../usercenter/addressManage?select=1'
				})
			},

			addOrder() {

				if (!this.address) {
					this.$util.$showToast('请填写收货地址', '', 'none');
					return;
				}
				let param = {
					type: this.type,
					goods: JSON.stringify(this.data),
					uid: uni.getStorageSync("uid"),
					type: this.type

				}
				console.info("======param=====" + JSON.stringify(param));
				let that = this;
				this.$api.addOrder(param).then(res => {

					if (res.code == 1) {
						that.orderNo = res.data.orderNo;
						console.info("==orderNo=====" + res.data.orderNo);
						if (that.type == 2) {

							uni.navigateBack({
								delta: 1
							})
						} else {
							that.wechatPay(res.data.payInfo);

						}
					} else {
						this.$util.$showToast(res.msg, '', 'none');

					}

				})
			},

			wechatPay(payConfig) {

				let that = this;
				console.info(this.orderNo);
				console.info("=====wechatPay=====" + JSON.stringify(payConfig));
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.timeStamp,
					nonceStr: payConfig.nonceStr,
					package: payConfig.package,
					signType: payConfig.signType,
					paySign: payConfig.paySign,
					success: function(res) {

						uni.navigateBack({
							delta: 1
						})
						// uni.redirectTo({
						// 	url: './orderDetail?orderNo=' + that.orderNo
						// })
					},
					fail: function(err) {}
				});
			},


			getList() {
				let param = {

				}
				let that = this;
				this.$api.getDefault(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						if (res.data != null) {

							this.address = res.data;
							that.isNullAddress = false;

						} else {
							that.isNullAddress = true;
						}
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F1F1;
	}

	.bg {
		height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #106DFE;
		z-index: 0;
	}

	.add-address {
		height: 110rpx;
		border-radius: 10rpx;
		text-align: center;
		// margin: 50rpx 30rpx 0 30rpx;
		position: relative;
		z-index: 1;
		background: url(../../static/address-bg.png) no-repeat bottom center #FFFFFF;
		background-size: 690rpx 10rpx;
		padding: 49rpx 46rpx;

		.row01 {
			display: flex;

			.name {
				font-size: 30rpx;
				margin-right: 30rpx;
				font-weight: bold;
			}

			.phone {
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
				flex: auto;
				text-align: left;
			}

			image {
				width: 37rpx;
				height: 37rpx;
			}
		}

		.row02 {
			padding: 16rpx 0 0 0;
			display: flex;

			.default {
				font-size: 20rpx;
				color: #EB1A12;
				background: #FFE4E3;
				margin-right: 20rpx;
				padding: 5rpx 8rpx;
				text-align: center;
				height: 29rpx;
				display: inline-block;
				font-weight: bold;
				width: 60rpx;
			}

			.address {
				font-size: 24rpx;
				text-align: left;
				color: #666666;
			}
		}
	}

	.add-ad {
		height: 237rpx;
		line-height: 237rpx;
		text-align: center;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		background: url(../../static/address-bg.png) no-repeat bottom center #FFFFFF;
		background-size: 690rpx 10rpx;
		margin-top: 20rpx;
		color: #666666;
	}

	.top {
		margin: 20rpx 0;
		background: #FFFFFF;
		padding: 32rpx 26rpx;
		display: flex;

		.cell01 {
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			margin-right: 20rpx;
		}

		.cell02 {
			.name {
				font-size: 30rpx;
				color: #666666;
				margin: 0 30rpx 30rpx 0;
			}

			.guige {
				text {
					display: inline-block;
					color: #9A9A9A;
					font-size: 24rpx;
					padding: 0 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 26rpx;
					background: #EFEFEF;
				}
			}
		}

		.cell03 {
			.pricebox {
				.priceicon {
					font-size: 24rpx;
					color: #333333;
					margin-right: 5rpx;
				}

				.pricetext {
					font-size: 32rpx;
					color: #333333;
				}
			}

			.count {
				margin-left: 23rpx;
				font-size: 28rpx;
				color: #8E8E8E;
				text-align: right;
			}
		}
	}

	.bottom {
		background: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 120rpx;

		.bottom-item {
			display: flex;
			margin-bottom: 40rpx;

			.left {
				flex: auto;
				color: #9A9A9A;
				font-size: 24rpx;
			}

			.right {
				text {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #1A1A1A;
				}
			}
		}

		.bottom-item2 {
			display: flex;
			margin-bottom: 40rpx;

			.left {
				flex: auto;
				color: #9A9A9A;
				font-size: 24rpx;
			}

			.right {
				text {
					font-size: 24rpx;
					color: #9A9A9A;
				}

				image {
					margin-left: 48rpx;
					width: 37rpx;
					height: 37rpx;
					vertical-align: middle;
				}
			}
		}

		.bottom-item3 {
			display: flex;
			margin-bottom: 40rpx;

			.left {
				color: #9A9A9A;
				font-size: 24rpx;
			}

			.right {
				input {
					color: #9A9A9A;
					font-size: 24rpx;
					margin-left: 48rpx;
				}
			}
		}

		.bottom-item4 {
			text-align: right;
			margin-top: 85rpx;
			color: #9A9A9A;
			font-size: 24rpx;

			.red {
				color: #EB1A12;
				font-size: 28rpx;
			}
		}
	}

	.fixedbtn {
		height: 100rpx;
		line-height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		view {
			float: right;
			display: flex;

			.label1 {
				color: #9A9A9A;
				font-size: 24rpx;
			}

			.label2 {
				color: #1A1A1A;
				font-size: 28rpx;

			}

			.label3 {
				color: #EB1A12;
				font-size: 34rpx;
			}

			.redbtn {
				margin: 10rpx 30rpx 10rpx 16rpx;
				background: #EB1A12;
				color: #FFFFFF;
				height: 80rpx;
				line-height: 80rpx;
				width: 200rpx;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>
